<template>
    <view style="padding: 0 20rpx;">
        <view class="all" :style="{backgroundColor: this.canColor}">
            <view class="leftLine" :style="leftTimeStyle"></view>
            <view class="line" v-for="(item,index) in disArr" :style="item" :key="index"></view>
            <view class="kedu">
                <view class="kedu-line" v-for="nums in 24" :key="nums"></view>
            </view>
        </view>
        <view class="nums">
            <view class="num" v-for="(num, index) in nums" :key="index">
                {{num}}
            </view>
        </view>
        <view class="tip">
            <view class="tip-block">
                <view class="tip-color" :style="{backgroundColor: leftColor}">
                    
                </view>
                <view class="tip-text ">
                    不可预约
                </view>
            </view>
            <view class="tip-block">
                <view class="tip-color" :style="{backgroundColor: lineColor}">
                    
                </view>
                <view class="tip-text">
                    已预约
                </view>
            </view>
            <view class="tip-block">
                <view class="tip-color" :style="{backgroundColor: canColor}">
                    
                </view>
                <view class="tip-text ">
                    可预约
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"time-slot",
        props:{
            leftColor: {
                type: String,
                default: '#E93A3A'
            },
            lineColor: {
                type: String,
                // default: '#31B179'
                default: '#0081ff'
            },
            canColor: {
                type: String,
                default: '#31B179'
            },
            currentDay: {
                type: String,
                default: ''
            },
            beginTimeKey: {
                type: String,
                default: 'begin_time'
            },
            endTimeKey: {
                type: String,
                default: 'end_time'
            },
            disTimeArr: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                nums: [0,2,4,6,8,10,12,14,16,18,20,22,24]
                // nums: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
            };
        },
        computed:{
            curDay(){
                return this.currentDay ? this.currentDay : this.getCurrentDay()
            },
            disArr(){
                const zeroTime = this.get_unix_time(this.curDay+' 00:00:00')
                return this.disTimeArr.map(e=>{
                    const leftWidth = this.get_unix_time(e[this.beginTimeKey]) - zeroTime;
                    const owerWidth = this.get_unix_time(e[this.endTimeKey]) - zeroTime - leftWidth;
                    return {
                        left: leftWidth/864+'%',
                        width: owerWidth/864+'%',
                        backgroundColor: this.lineColor
                    }
                })
            },
            leftTimeStyle(){
                return {
                    left: 0,
                    width: ((new Date()).getTime().toString().substr(0,10) - this.get_unix_time(this.curDay+' 00:00:00'))/864+'%',
                    backgroundColor: this.leftColor
                }
            }
        },
        methods:{
            get_unix_time(dateStr) {
                var newstr = dateStr.replace(/-/g, '/');
                var date = new Date(newstr);
                var time_str = date.getTime().toString();
                return time_str.substr(0, 10);
            },
            getCurrentDay(){
                const strFormat = (str) => {
                    return str < 10 ? `0${str}` : str
                }
                const myDate = new Date();
                const y = myDate.getFullYear()
                const m = myDate.getMonth() + 1;
                const d = myDate.getDate();
                return y + '-' + strFormat(m) + '-' + strFormat(d);
            }
        }
    }
</script>

<style lang="scss" scoped>
.all{
    position: relative;
    width: 100%;
    height: 30rpx;
    background-color: #CAD1CE;
	// padding: 0 20rpx;
    .line{
        position: absolute;
        height: 30rpx;
        width: 200rpx;
        top: 0;
        left: 50%;
        background-color: #31B179;
        z-index: 3;
    }
    .leftLine{
        position: absolute;
        height: 30rpx;
        width: 200rpx;
        top: 0;
        left: 50%;
        background-color: #E93A3A;
        z-index: 2;
    }
    
}

.kedu{
    display: flex;
    position: absolute;
    align-items: flex-end;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 4;
    .kedu-line{
        width: 4.1%;
        height: 10rpx;
        border-right: 1px solid #fff;
    }
    .kedu-line:nth-child(2n) {
        height: 20rpx;
    }
}
.nums{
    width: 108.2%;
    display: flex;
    margin-left: -4.1%;
    .num{
        width: 8.2%;
        font-size: 23rpx;
        text-align: center;
    }
}
.tip{
    display: flex;
    .tip-block{
        display: flex;
        align-items: center;
        padding: 10rpx;
        justify-content: center;
        .tip-color{
            width: 20rpx;
            height: 20rpx;
        }
        .tip-text{
            margin-left: 10rpx;
            font-size: 22rpx;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #999999;
        }
    }
}
</style>